 <template>
	<view class="upAdd">
		<view class="upItem">
			<view>收件人</view>
			<input v-model="addressData.name" type="text" placeholder="收件人姓名" />
		</view>
		<view class="upItem">
			<view>手机号</view>
			<input v-model="addressData.phone"  type="text" placeholder="11位手机号" />
		</view>
		<view class="upItem">
			<view>所在地址</view>
				<!-- <uni-data-picker ref="picker" placeholder="请选择级数" v-model="datav" :localdata="localdata" @change="changePicker"  @nodeclick="stepData" preload="true"></uni-data-picker> -->
				<view type="text" placeholder="请选择地区">
								<picker class="pickerList" mode="multiSelector" 
								:range="newProvinceDataList" 
								:value="multiIndex" 
								@change="pickerChange" 
								@columnchange="pickerColumnchange">
									<!-- <view>{{provinceDataList[0].name}}--{{provinceDataList[0].city[0].name}}--{{provinceDataList[0].city[0].area[0]}}</view> -->
									<view style="color:#66ccff;">{{select}}</view>
								</picker>
							</view>

		</view>
		
		<view class="upItem">
			<view>详细地址</view>
			<input  v-model="addressData.detailAddress"  type="text" placeholder="具体街道地址"/>
		</view> 
		<view class="upItem">
			<view>默认选择</view>
			<label>
					<button style="width: 200rpx;height: 80rpx;font-size: 32rpx;" @click="addressData.preset=!addressData.preset">{{addressData.preset ? '取消默认' : '设为默认'}}</button>
			</label>
		</view>
		<view class="endTool">
			<!-- 两种情况 新增和修改 -->
			<view @click="addressOperation(opration.text)">{{opration.text}}</view>
			<view @click="addressOperation(opration.help)">{{opration.help}}</view>
		</view>
	</view>
</template>

<script>
	import cityData from '@/common/cityData.js';
	import userConfig from '@/common/api/config/userConfig.js'
	export default {
		data() {
			return {
				oldpProvinceDataList: cityData.data,
				newProvinceDataList:[
					[],[],[]
				],
				multiIndex: [0, 0, 0],
				select:'选择省市区',
				addressData:{
					userId:'',
					name:'',
					phone:'',
					address:'',
					detailAddress:'',
					preset:false
				},
				binhao:'1',
				opration:''
			}
		},
		onLoad(options){
			if(options.id == null){
				this.opration = {'text':'保存','help':'清空','code':'1'};
			}else{
				this.addressData.id = options.id;
				this.opration = {'text':'修改','help':'删除','code':'2'};
				this.init(this.addressData.id );
			}
			// console.log(this.oldpProvinceDataList);
			for(let i=0; i<this.oldpProvinceDataList.length; i++){
				// console.log(this.oldpProvinceDataList[i].name);
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].city.length; i++){
				// console.log(this.oldpProvinceDataList[0].city[i].name)
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for(let i=0; i<this.oldpProvinceDataList[0].city[0].area.length; i++){
				// console.log(this.oldpProvinceDataList[0].city[0].area)
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
			// console.log(this.newProvinceDataList)
		},
		methods: {
			// 省市区确认事件
			pickerChange(e){
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取省
				// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
				// 获取市
				// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
				// 获取区
				// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
				this.select = `${this.newProvinceDataList[0][this.multiIndex[0]]}/${this.newProvinceDataList[1][this.multiIndex[1]]}/${this.newProvinceDataList[2][this.multiIndex[2]]}`
				this.addressData.address = this.select;
				console.log(this.addressData)
			},
			pickerColumnchange(e){
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item,index)=>{
						// console.log(item)
						return item.name
					})
					// console.log(this.multiIndex)
					if(this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1){
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,index)=>{
							// console.log(item)
							return item
						})
					}else{
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item,index)=>{
							// console.log(item)
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item,index)=>{
						// console.log(item)
						return item
					})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
					// console.log('第三列滑动')
					// console.log(this.multiIndex)
				}
			},
			addressOperation(o){
				switch(o){
					case '清空':
						this.reset();
						break;
					case '删除':
						userConfig.delete(this.addressData.id)
							.then(res=>{
								uni.showToast({
									title:'已删除',
								})
								this.goAddress();
							})
						break;
					case '修改':
						userConfig.update(this.addressData)
							.then(res=>{
								uni.showToast({
									title:'已修改',
								})
								this.goAddress();
							})
						break;
					case '保存':
						userConfig.add(this.addressData)
							.then(res=>{
								uni.showToast({
									title:'已保存',
								})
								this.goAddress();
							})
						break;
				}
			},
			reset(){
				this.addressData.address='';
				this.addressData.detailAddress='';
				this.addressData.phone='';
				this.addressData.name='';
				this.addressData.preset=false;
				this.select='请选择城市'
			},
			goAddress(){
				uni.redirectTo({
					url:"/pages/config/address"
				})
			},
			init(id){
				userConfig.get(id)
					.then(res=>{
						this.addressData = res.data.address;
						console.log(this.addressData);
						this.select = res.data.address.address;
					})
			}
		}
	}
</script>


<style>
.upAdd{
	padding-left: 20rpx;
}
.upItem{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.upItem input{
	flex: 1;
	text-align: left;
	margin-left: 20rpx;
	border-bottom: 2rpx solid #9c9c9c;
}
.endTool{
	background-color: #fafafa;
	height: 10%;
	bottom: 0rpx;
	width: 100%;
	position: fixed;
}
.endTool view{
	line-height: 120rpx;
	text-align: center;
	float: left;
	height: 120rpx;
	width: 300rpx;
	margin-left: 40rpx;
	border: 2rpx solid #66ccff;
	background-color: #66ccff;
	color: #fafafa;
}
</style>
